<template>
  <view class="revoke d-r">
    <text class="text" v-if="message.flow === 'in'">{{message.nameCard||message.nick || message.from  }}</text>
    <text class="text" v-else>你</text>
    <text class="text">撤回了一条消息</text>
    <text class="edit" v-if="message.flow === 'out'&&timeNeedShow" @tap.stop="edit">重新编辑</text>
  </view>
</template>

<script lang="ts">
import { defineComponent, watchEffect,ref, reactive, toRefs } from 'vue';

const MessageRevoked = defineComponent({
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
  },
  setup(props:any, ctx:any) {
    const data = reactive({
      message: {},
    });

    const timeNeedShow = ref(true);

    watchEffect(()=>{
      data.message = props.data;

      const n = new Date().getTime()+'';

      const s = Number(n.substring(0,10));


      if(s-data.message.time>300){
        timeNeedShow.value = false
      }





    });

    const edit = () => {

      ctx.emit('edit', data.message);
    };

    return {
      ...toRefs(data),
      edit,
      timeNeedShow
    };
  }
});
export default MessageRevoked
</script>
<style lang="scss" scoped>
.revoke {
  display: flex;
  justify-content: center;
  width: 750rpx;
	padding:0 5px;
    padding-top:15px;
    .text{
        font-size: 13px;
        color: #999999;
    }
  .edit {
    font-size: 13px;
    margin-left:5px;
    color: $slim-main;
  }
}
</style>
